<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>银行系统</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
<div class="container">
    <h1>Python Bank</h1>
    <hr>
    <a type="button" class="btn btn-outline-primary" href="/signup">注册</a>
    <a type="button" class="btn btn-outline-secondary" href="/query">查询</a>
    <a type="button" class="btn btn-outline-success" href="/transfor">转账</a>
    <a type="button" class="btn btn-outline-warning" href="/deposit">存款</a>
    <button type="button" class="btn btn-info">改密</button>
    <a type="button" class="btn btn-outline-dark" href="/">主页</a>
    <hr>
    <div class="alert alert-info" role="alert">
        使用原密码或身份证改密，仅输入一项即可
    </div>
    <div class="form-group row">
        <label for="card_number" class="col-sm-1 col-form-label">卡号</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="card_number">
        </div>
    </div>
    <div class="form-group row">
        <label for="old_password" class="col-sm-1 col-form-label">原密码</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" id="old_password">
        </div>
    </div>
    <div class="form-group row">
        <label for="id_number" class="col-sm-1 col-form-label">身份证</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="id_number">
        </div>
    </div>
    <div class="form-group row">
        <label for="new_password" class="col-sm-1 col-form-label">新密码</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" id="new_password">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-6">
            <button type="button" class="btn btn-primary" onclick="changepwd()">改密</button>
        </div>
    </div>
    <div role="alert" id="changepwd_result" style="display: none">此处显示改密结果</div>
</div>
<script>
    function changepwd() {
        //获取表单输入
        var card_number = $('#card_number').val();
        var old_password = $('#old_password').val();
        var id_number = $('#id_number').val();
        var new_password = $('#new_password').val();
        //使用$.ajax()发送异步请求
        $.post({
            url: "changepwd_action/",//请求路径，最后一个单斜杠不能丢
            dataType: "json",//设置接受到的响应数据的格式，必须写json，否则无法取值
            data: {
                "card_number": card_number,
                "old_password": old_password,
                "id_number": id_number,
                "new_password": new_password,
                // 必须加CSRF，否则报403
                "csrfmiddlewaretoken": '{{ csrf_token }}'
            },
            success: function (data) {
                var changepwd_result_dom = $("#changepwd_result")
                if (data.status === 'failed') {
                    changepwd_result_dom.css('display', '');
                    changepwd_result_dom.attr('class', 'alert alert-danger');
                    changepwd_result_dom.text(data.msg);
                } else if (data.status === 'success') {
                    changepwd_result_dom.css('display', '');
                    changepwd_result_dom.attr('class', 'alert alert-success');
                    changepwd_result_dom.html(data.msg);
                }
            },//响应成功后的回调函数
            error: function () {
                alert("出错啦");
            }//表示如果请求响应出现错误，会执行的回调函数
        });
    }
</script>
</body>
</html>